<template>
  <div class="HeadShortcut">
    <div class="HeadShortcut_icon" @click="skipList">
      <img src="../../../assets/images/jian_03.jpg" alt />
    </div>
    <ul class="HeadShortcut_ul">
      <li v-for="(item,index) in NameList" :key="index" @click="NameListSkip(item,index)">
       <el-tooltip class="item" effect="dark" :content="item" placement="top">
          <div style="padding-left: 15px;">{{item}}</div>
            </el-tooltip>
        <div>
          <img src="../../../assets/images/jian2_05.png" alt />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HeadShortcut",
  props: {
    directoryName: {
      required: true
    },
    emptyHead: {
      required: true
    }
  },
  data() {
    return {
      NameList: ["根目录"]
    };
  },
  watch: {
    directoryName(val) {
      if (val) {
        this.NameList.push(val);
      }
    },
    emptyHead(val) {
        this.NameList = ["根目录"];
    }
  },

  methods: {
    skipList() {
      if (this.NameList.length == 1) {
        return;
      }
      let skipPath2 = [];
      this.NameList.pop();
      this.NameList.forEach((ele, num) => {
        if (num !== 0) {
          skipPath2.push(ele + "/");
        }
      });
      let abc = skipPath2.toString();
      abc = abc.replace(/,/g, "");
      this.$emit("directory", abc);
      // this.$emit("directory", "");
      // this.NameList = [];
    },
    NameListSkip(item, index) {
      let skipPath2 = [];
      let arrayTime = [];
      if (item == "根目录") {
        this.NameList = ["根目录"];
        this.$emit("directory", "");
        return;
      }
      this.NameList.forEach((ele, num) => {
        if (num <= index) {
          skipPath2.push(ele);
          if (ele !== "根目录") {
            arrayTime.push(ele + "/");
          }
        }
      });
      this.NameList = skipPath2;
      let abc = arrayTime.toString();
      abc = abc.replace(/,/g, "");
      this.$emit("directory", abc);
    }
  }
};
</script>



<style lang="stylus" scoped>
.HeadShortcut {
  display: flex;
  height: 25px;
  width: 97%;
  margin: 0 auto;
  border: 1px solid #ccc;
  background-color: #f3f3f3;
  .HeadShortcut_ul {
    display: flex;
    font-size: 14px;
    line-height: 25px;
       overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    li {
      display: flex;
      color: #333;
      text-align: center;
      cursor: pointer;
         div:nth-child(1) {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img {
        height: 100%;
        padding: 0 15px;
      }
    }
  }
  .HeadShortcut_icon {
    cursor: pointer;
    width: 35px;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid #ccc;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
